<!-- <template>
  <div>
    <GridHandler />
  </div>
</template>

<script lang="ts">
import { Component, Watch } from "vue-property-decorator";
import Mixins from "./CMixins.vue";
import GridHandler from "./CGridHandler.vue";
import exportVue from "@/assets/modules/exportVue";
import { getModules } from "~/assets/modules/arcgisAPI";
import store from "~/assets/modules/store";
import { changeExtent } from "@/assets/modules/utils";
@Component({
  name: "GridmanHandler",
  components: {
    GridHandler
  }
})
export default class extends Mixins {
  get gridmanData() {
    return this.$store.getters["videoData/gridmanData"];
  }
  get loaded2d() {
    return this.$store.getters["view/loaded2d"];
  }
  @Watch("loaded2d")
  handleLoaded2d() {
    if (this.loaded2d) {
      this.handleClickEvt();
    }
  }
  // 激活数据
  private active: any = null;
  private trackGraphic: any = null;
  // 高亮
  private hlhandler: any = null;

  async mounted() {
    this.bindActive();
    this.handleTrackActive();
    this.handleTrackIndex();
    this.handleClickEvt();
  }

  beforeDestroy() {
    if (this.view) {
      if (this.trackLayer) {
        this.view.map.remove(this.trackLayer);
      }
      if (this.hlhandler) {
        this.hlhandler.remove();
        this.hlhandler = null;
      }
    }
    this.destroy();
  }
  bindActive() {
    exportVue.$on("initGrid", (item: any) => {
      this.active = item;
      this.handleActive(item);
    });
  }

  // 地图列表点击响应
  handleActive(item: any) {
    if (this.view && store.gridmanLayer) {
      const sfid = item.sfid;
      const graphics = store.gridmanLayer.source.filter((el: any) => {
        return el.attributes.objectId === sfid;
      });
      console.log(graphics);
      if (this.hlhandler) {
        this.hlhandler.remove();
        this.hlhandler = null;
      }
      if (graphics.length > 0) {
        const graphic = graphics.getItemAt(0);
        this.highlightGridman(graphic);
        this.view.goTo({ target: graphic, scale: 1000 });
      }
    }
  }

  // 地图点击事件
  handleClickEvt() {
    if (this.evt) {
      this.evt.remove();
      this.evt = null;
    }
    if (this.view) {
      this.evt = this.view.on("click", (e: any) => {
        this.view.hitTest(e).then((res: any) => {
          for (let i = 0; i < res.results.length; i++) {
            const item = res.results[i];
            const graphic = item.graphic;
            if (graphic.layer === store.gridmanLayer) {
              const id = graphic.attributes.objectId;
              const items = this.gridmanData.filter((el: any) => {
                return el.sfid === id;
              });
              if (items.length > 0) {
                exportVue.$emit("clickGrid", items[0]);
              }
            }
          }
        });
      });
    }
  }

  // 高亮
  highlightGridman(graphic: any) {
    if (this.hlhandler) {
      this.hlhandler.remove();
      this.hlhandler = null;
    }
    if (this.view) {
      this.view.highlightOptions = {
        color: [0, 255, 255, 1],
        haloColor: [0, 255, 255, 1],
        haloOpacity: 1,
        fillOpacity: 0.5
      };
      this.view.whenLayerView(store.gridmanLayer).then((layerView: any) => {
        this.hlhandler = layerView.highlight(graphic);
      });
    }
  }
  // 轨迹
  async handleTrackActive() {
    const modules = await getModules(["esri/layers/GraphicsLayer"]);
    exportVue.$on("track-active", (status: boolean) => {
      if (status) {
        const [GraphicLayer] = modules;
        const layer = new GraphicLayer();
        this.trackLayer = layer;
        this.addTrack();
        this.view.map.add(layer);
      } else if (this.trackLayer) {
        this.view.map.remove(this.trackLayer);
      }
    });
  }

  handleTrackIndex() {
    exportVue.$on("track-active-index", (index: number) => {
      this.addTrack(index);
    });
  }

  // 添加总的轨迹 index 0-100
  async addTrack(index?: number) {
    if (!this.trackLayer) return;
    const modules = await getModules(["esri/Graphic"]);
    const [Graphic] = modules;
    let paths: number[][][] = [];
    let pointStart: number[] = [];
    let pointEnd: number[] = [];
    const data: any[] = this.active.track;
    if (data.length > 0) {
      paths = [data];
      pointEnd = data[0];
      pointStart = data[data.length - 1];

      const graphic = new Graphic({
        geometry: {
          paths,
          type: "polyline",
          spatialReference: store.spatialReference
        },
        symbol: index
          ? {
              type: "simple-line",
              color: [0, 255, 255],
              width: "4px"
            }
          : {
              type: "simple-line",
              color: "red",
              width: "4px"
            }
      });
      this.trackLayer.add(graphic);
      this.trackGraphic = graphic;
      this.view.extent = changeExtent(graphic.geometry.extent.clone());
      this.addTrackPoint(pointStart, "start");
      this.addTrackPoint(pointEnd, "end");
    }
  }

  async addTrackPoint(point: number[], type: string) {
    const modules = await getModules(["esri/Graphic"]);
    const [Graphic] = modules;
    const symbol = this.getSymbol(type);
    const graphic = new Graphic({
      geometry: {
        x: point[0],
        y: point[1],
        type: "point",
        spatialReference: store.spatialReference
      },
      symbol
    });
    this.trackLayer.add(graphic);
  }

  private getSymbol(type: string) {
    const img =
      type == "start"
        ? require("@/assets/images/points/qidian.png")
        : require("@/assets/images/points/zhongdian.png");
    return {
      type: "picture-marker",
      url: img,
      width: "28px",
      height: "34px",
      yoffset: "17px"
    };
  }
}
</script>

<style lang="scss" scoped></style> -->
